<%@ page import="org.apache.struts2.ServletActionContext" %>
<%@ page import="Entities.DoeBookEntity" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Iterator" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/8/008
  Time: 19:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <%--<script type="text/javascript" src='jquery-1.9.1.js'></script>--%>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/loadingStyle.css">

    <!--自定义的样式-->
    <style>
        .pic{
            float: left;
            width: 120px;
            height: 184px;
            margin-right: 20px;
            border: #000 solid 1px;
            overflow: hidden;
        }
        .pic a {
            position: relative;
            display: block;
            overflow: hidden;
            width: 100%;
            height: 100%;
            box-shadow: 0 1px 6px rgba(0,0,0,.35), 0 0 5px #f9f2e9 inset;
        }
        .pic a img{
              position: relative;
              display: block;
              overflow: hidden;
              width: 100%;
              height: 100%;
              box-shadow: 0 1px 6px rgba(0,0,0,.35), 0 0 5px #f9f2e9 inset;
              cursor: pointer;
              transition: all 0.6s ease-out;
          }
        .pic a img:hover{
            transform: scale(1.1);
        }


        .subject-item, .site-item {
            overflow: hidden;
            zoom: 1;
            border-top: 1px dashed #ddd;
            padding: 20px 0 10px;
        }
        .subject-item .info, .site-item .info {
            overflow: hidden;
            zoom: 1;
            color: #666;
        }
        .subject-item .pic, .site-item .pic {
            float: left;
            margin-right: 20px;
        }
        .subject-item .info p{
            margin-top: 6px;
            margin-bottom: 6px;
            font-size: 13px;
        }
        .subject-item .info p em{
            margin: 1px 5px 0;
            color: #a5a5a5;
        }
        .subject-item .info .ft {
            margin-top: 10px;
            position: relative;
            min-height: 19px;
            _height: 19px;
        }
        h2 {
            font: 15px Arial, Helvetica, sans-serif;
            color: #1f0404;
            margin: 0 0 12px 0;
            line-height: 150%;
        }
        #content{
            width: 1000px;
            margin-left: 100px;
        }
        #bookList{
            width: 675px;
            float: left;
        }
    </style>

</head>
<body>
<%
    String sessionID = session.getId();
%>
<font id="sessionID" hidden="hidden"><%=sessionID%></font>
<div class="container">
    <div class="row clearfix" style="background-color: rgba(0,0,0,0.7)">
        <div class="col-md-11 column" style="padding-top: 20px">
            <form action="searchAction" id="form">
                <div class="dropdown" style="vertical-align: middle">
                    <a style="color: white;font-size: x-large">搜索</a>
                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" style="margin-left:20px;height: 25px">
                        <span class="caret" /> <!--搜索选项下拉框-->
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu0">
                        <li role="presentation">
                            <a role="menuitem" href="javascript:void(0);" id="item1" tabindex="-1" onclick="javascript:document.getElementById('searchContent').placeholder='请输入书名';javascript:document.getElementById('form').action='searchAction'">搜图书</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" href="javascript:void(0);" id="item2" tabindex="-1" onclick="javascript:document.getElementById('searchContent').placeholder='请输入图书标签';javascript:document.getElementById('form').action='bookListByTagAction'">搜标签</a>
                        </li>

                    </ul>
                    <input type="text" id="searchContent" name="searchContent" placeholder="请输入书名">
                    <button class="btn btn-link" onclick="myFunc()">
                        <span class="glyphicon glyphicon-search" style="color: white"></span>
                        <span style="color:white" >Search</span></button>
                </div>
            </form>
        </div>

        <!--返回主页按钮-->
        <div class="col-md-1 column">
            <h3><a href="homeAction" style="color: white">主页</a></h3>
        </div>

    </div>
    <hr>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <h4>
                    <%
//                    List<DoeBookEntity> searchList1 = (List<DoeBookEntity>)session.getAttribute("searchList");
//                    Iterator<DoeBookEntity> searchList = searchList1.listIterator();
                    %>
        </div>
        <div>
            <%--此处应该获得标签--%>
        </div>
    </div>
    <hr>
    <div id="content">
        <div id="bookList">
            <h2>已搜索到${searchResSize}条记录</h2>
            <s:iterator value="searchList" status="index">
                <div class="subject-item">
                    <div class="pic">
                        <a target="_blank" href="bookDetailAction?book_id=${bookId}">
                            <img alt="140x140" src=${imageUrl}  style="height:184px;width:120px" />
                        </a>
                    </div>
                    <div class="info">
                        <h2 style="margin-bottom: 3px">${bookName}</h2>
                        <p>
                            <span class="author">${author}</span>
                            <em>|</em>
                            <span class="pub">${publisher}</span>
                            <em>|</em>
                            <span class="price">${price}</span>
                        </p>
                        <div class="star">评分: ${star}</div>
                        <div style="margin-top: 10px">
                            <s:if test="contentDes.length()>100">
                                <%--<p>${contentDes}</p>--%>
                                <s:property value="contentDes.substring(0,100)" />
                                <a href="#"  style="cursor:default;text-decoration:none;color:#0000ff;" title="${contentDes}">...</a>
                            </s:if>
                            <s:else>
                                <s:property value="contentDes" />
                            </s:else>
                        </div>
                        <div class="ft">
                            <span><a href="bookDetailAction?book_id=${bookId}" target="_blank">详情</a></span>
                        </div>
                    </div>
                </div>
            </s:iterator>
        </div>
    </div>
</div>
</body>
<div id="loading" class="loader">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
</div>
</html>
<script type="text/javascript">
    function getCookie(name){
        var arr = document.cookie.split("; ");
        for(var i=0; i<arr.length; i++){
            var arr2 = arr[i].split("=");
            if(arr2[0] == name){
                return arr2[1];
            }
        }
        return "";
    }
    var sessionID = $("#sessionID").text()
    //获取页面顶部被卷起来的高度
    function scrollTop(){
        return Math.max(
            //chrome
            document.body.scrollTop,
            //firefox/IE
            document.documentElement.scrollTop);
    }
    //获取页面文档的总高度
    function documentHeight(){
        //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
        return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
    }
    //获取页面浏览器视口的高度
    function windowHeight(){
        //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
        return (document.compatMode == "CSS1Compat")?
            document.documentElement.clientHeight:
            document.body.clientHeight;
    }
</script>

<script>
    function myFunc() {
        $("#form").submit();
    }
</script>

<script type="text/javascript">
    var getRecIndex
    var getRecLimit
    var resultType = this.location.pathname
    // //为ajax绑定loading_bottom
    // $(document).ajaxStart(function(){
    //     $("#loading").show();//在ajax请求开始的时候启用loading
    // }).ajaxStop(function(){
    //     sleep(1000)
    //     $('#loading').hide(0);//在ajax请求结束后隐藏loading
    // });
    window.onload = function (ev) {
        getRecIndex = 14
        getRecLimit = 7
    }


    //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
    $(document).ready(function () {
        window.onscroll = function () {
            //监听事件内容
            if(documentHeight() <= windowHeight() + scrollTop()){
                //当滚动条到底时,这里是触发内容
                //异步请求数据,局部刷新dom
                waterallowData()
            }
        }
    });

    function sleep(d){
        for(var t = Date.now();Date.now() - t <= d;);
    }
    function waterallowData(){
        $("#loading").show();
        $.ajax({
            type: "GET",
            url: resultType+"?after_id="+getRecIndex+"&limit="+getRecLimit,
            dataType:"json",
            error:function () {
                alert("错误");
                sleep(1000)
                $('#loading').hide(0);
            },
            success:function (msg) {
                if (msg.length == 0)
                    alert("没有更多了");
                addFeedListByJson(msg)
                sleep(1000)
                $('#loading').hide(0);
            }

        });
        getRecIndex = getRecIndex + getRecLimit
    }


    var bookList = document.getElementById("bookList")

    function addFeedListByJson(msg) {
        var feedList = msg
        for (var i = 0;i < feedList.length;i++){
            var bookInfo = feedList[i]
            addElement(bookInfo)
        }
    }

    function fadeIn(el,time){
        if(el.style.opacity === ""){
            el.style.opacity = 0;
        }
        if(el.style.display === "" || el.style.display === 'none'){
            el.style.display = 'block';
        }

        var t = setInterval(function(){
            if(el.style.opacity < 1){
                el.style.opacity = parseFloat(el.style.opacity)+0.01;
            }
            else{
                clearInterval(t);
            }
        },time/100);
    }


    function addElement(bookInfo) {
        var element = document.createElement('div');
        element.classList.add('subject-item');
        // element.classList.add('invisible');

        var pic = document.createElement('div');
        pic.classList.add('pic');
        var pic_a = document.createElement('a');
        pic_a.target = "_blank";
        pic_a.href = "bookDetailAction?book_id="+bookInfo.bookId;
        var pic_img = document.createElement('img');
        pic_img.alt = "140x140";
        pic_img.src = bookInfo.imageUrl;
        pic_img.style = "height:184px;width:120px";
        pic_a.appendChild(pic_img);
        pic.appendChild(pic_a);

        var info = document.createElement('div');
        info.classList.add('info');
        var info_title = document.createElement('h2');
        info_title.style = "margin-bottom: 3px";
        info_title.innerHTML = bookInfo.bookName;
        var info_p = document.createElement('p');
        var author = document.createElement('span');
        author.classList.add("author");
        author.innerHTML = bookInfo.author;
        var em_1 = document.createElement('em');
        em_1.innerHTML = "|";
        var pub = document.createElement('span');
        pub.classList.add('pub');
        pub.innerHTML = bookInfo.publisher;
        var em_2 = document.createElement('em');
        em_2.innerHTML = "|";
        var price = document.createElement('span');
        price.classList.add('price');
        price.innerHTML = bookInfo.price;
        info_p.appendChild(author);
        info_p.appendChild(em_1);
        info_p.appendChild(pub);
        info_p.appendChild(em_2);
        info_p.appendChild(price);
        var star = document.createElement('div');
        star.classList.add('star');
        star.innerHTML = "评分: "+bookInfo.star;
        var contentDes = document.createElement('div');
        contentDes.style = "margin-top: 10px";
        var des = bookInfo.contentDes;
        if (des.length > 100) {
            des = des.substring(0, 100);
            var hideInfo = document.createElement('a');
            hideInfo.href = '#';
            hideInfo.style = "cursor:default;text-decoration:none;color:#0000ff;";
            hideInfo.title = bookInfo.contentDes;
            hideInfo.innerHTML = "...";
            contentDes.innerHTML = des;
            contentDes.appendChild(hideInfo);
        }else
            contentDes.innerHTML = des;
        var ft = document.createElement('div');
        ft.classList.add('ft');
        var detail = document.createElement('span');
        var detail_a = document.createElement('a');
        detail_a.href = "bookDetailAction?book_id="+bookInfo.bookId;
        detail_a.target = "_blank";
        detail_a.innerHTML = "详情";
        detail.appendChild(detail_a);
        info.appendChild(info_title);
        info.appendChild(info_p);
        info.appendChild(star);
        info.appendChild(contentDes);
        info.appendChild(detail);

        element.appendChild(pic);
        element.appendChild(info);

        var autoLoadTip = document.getElementById("auto-load-tip");
        bookList.insertBefore(element,autoLoadTip);
        fadeIn(element,1000);
    }

</script>